<template>
  <div style="text-align: center;margin: auto">
    <div style="height: 50px">
      <el-button type="primary"
                 @click="add" style="float: left">新增</el-button>
    </div>
    <el-table
        :data="images"
        style="width:1450px;border-radius: 15px">
      <el-table-column
          label="图片"
          prop="url" >
        <template slot-scope="scope">
          <el-image :src="'http://localhost:8084/'+scope.row.url.slice(7)" style="width: 120px;height: 90px" />
        </template>
      </el-table-column>

      <el-table-column
          label="操作"
          align="center" >
        <template slot-scope="scope" style="width: 100px">
          <el-button
              size="mini"
              @click="editImg(scope.$index, scope.row)" style="width: 50px;display: inline-block">修改</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteImg(scope.$index, scope.row)" style="width: 50px;display: inline-block">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="isEdit?'修改轮播图':'新增轮播图'" :visible.sync="dialogVisible" style="line-height: 15px">
      <el-form :model="editShopInfo" status-icon :rules="shopRules" ref="editShopInfo" style="text-align: left">
        <el-form-item label="轮播图" :label-width="formLabelWidth">
          <el-upload
              ref="upload"
              action="http://localhost:8084/upload"
              name="picture"
              list-type="picture-card"
              :limit="1"
              :file-list="fileList"
              :on-exceed="onExceed"
              :before-upload="beforeUpload"
              :before-remove="beforeRemove"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogPicVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="flush">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserManager",
  created() {
    //this.userInfo = this.$route.params.userInfo;
    this.axios.get("http://localhost:8084/lbtImg").then(resp=>{
      console.log(resp.data.data);
      this.images = resp.data.data;
    })
  },
  data(){
    return{
      images:[],
      dialogVisible:false,
      formLabelWidth:'120px',
      form:'',
      isEdit:false,
      dialogImageUrl:'',
      thisUrl:'',
      thisImg:{}
    }
  },
  methods:{
    editImg(index,item){
      this.dialogVisible = true
      this.isEdit = true
      this.dialogImageUrl = item.url
      this.thisImg = item
    },
    deleteImg(index,item){
      this.axios.get("http://localhost:8084/lbt/delete?id="+item.id).then(resp=>{
        if (resp.data.code == 200){
          this.$message({
            message: '轮播图删除成功',
            type: 'success'
          });
          this.axios.get("http://localhost:8084/lbtImg").then(rr=>{
            console.log(rr.data.data);
            this.images = rr.data.data;
          })
        }else {
          this.$message("失败!")
        }

      })
    },
    handleSuccess(res){
      console.log(res.message)
      this.thisUrl = res.message;
    },
    flush(){
      this.thisUrl = '';
      this.dialogVisible = false
    },
    save(){
      var url = "http://localhost:8084/lbt/add"
      if (this.isEdit){

        url += "?id="+this.thisImg.id+"&&url="+this.thisUrl;
      }else {
        url += "?url="+this.thisUrl;
      }
      this.axios.get(url).then(resp=>{
        this.$message({
          message: '轮播图保存成功',
          type: 'success'
        });
        this.axios.get("http://localhost:8084/lbtImg").then(resp=>{
          console.log(resp.data.data);
          this.images = resp.data.data;
        })
      })
      this.thisUrl = '';
      this.dialogVisible = false
    },

    add(){
      this.dialogVisible = true
      this.isEdit = false
    }

  }
}
</script>

<style scoped>
.el-table{
  line-height: 50px;
  margin: auto;
}
</style>
